{% extends 'base.html' %}

{% block right_content %}

    <!-- 右侧内容 -->
     <div class="right">
        <!-- 顶部搜索 -->
        <div class="top">
            <div class="tool">
                <div class="class-info">
                    <form method="get" action="{% url 'grades_list' %}">
                        <span>班级名称</span>
                        <input type="text" name="search" placeholder="搜索班级名称..." value="">
                        <input type="submit" value="搜索">
                        <a href="{% url 'grades_create' %}"> 
                            <button type="button" class="add">新增</button>
                        </a>
                    </form>
                </div>
            </div>
        </div>

        <!-- 底部数据展示 -->
        <div class="bottom">
        <table>
            <thead>
                <tr>
                    <th>班级名称</th>
                    <th>班级编号</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {% for grade in grades %}
                <tr>
                    <td>{{ grade.grade_name }}</td>
                    <td>{{ grade.grade_number }}</td>
                    <td>
                        <a href="{% url 'grades_update' grade.pk %}" class="edit" style="color: green;"> 
                            <!-- <button class="add">编辑</button> -->
                            编辑
                        </a>
                        <a href="{% url 'grades_delete' grade.pk %}" class="del" style="color: red;">
                            <!-- <button class="delete">删除</button> -->
                            删除
                        </a>
                        
                    </td>

                </tr>
                {% endfor %}

            </tbody>

        </table>
        <!-- 分页导航 -->
        <div class="pagination">
            <span class="step-links">
                {% if page_obj.has_previous %}
                    <a href="?page=1">&laquo; 首页</a>
                    <a href="?page={{ page_obj.previous_page_number }}">上一页</a>
                {% endif %}

                <span class="current">
                    {{ page_obj.number }} / {{ page_obj.paginator.num_pages }}
                </span>

                {% if page_obj.has_next %}
                    <a href="?page={{ page_obj.next_page_number }}">下一页</a>
                    <a href="?page={{ page_obj.paginator.num_pages }}">末页 &raquo;</a>
                {% endif %} 
            </span>


        </div>

        
        </div>



     </div>

{% endblock %}